$mci-default-color: var(--color-text-5);
$mci-default-bd-color: var(--color-fill-3);
$mci-default-bg-color: var(--color-fill-3);
$mci-default-hover-color: var(--color-text-5);
$mci-default-hover-bd-color: var(--color-fill-4);
$mci-default-hover-bg-color: var(--color-fill-4);
$mci-default-active-color: var(--color-text-5);
$mci-default-active-bd-color: var(--color-fill-5);
$mci-default-active-bg-color: var(--color-fill-5);
$mci-default-disabled-color: var(--color-text-5);
$mci-default-disabled-bd-color: var(--color-fill-2);
$mci-default-disabled-bg-color: var(--color-fill-2);


$mci-primary-color: var(--color-text-1);
$mci-primary-bd-color: var(--color-brand-6);
$mci-primary-bg-color: var(--color-brand-6);
$mci-primary-hover-color: var(--color-text-1);
$mci-primary-hover-bd-color: var(--color-brand-5);
$mci-primary-hover-bg-color: var(--color-brand-5);
$mci-primary-active-color: var(--color-text-1);
$mci-primary-active-bd-color: var(--color-brand-7);
$mci-primary-active-bg-color: var(--color-brand-7);
$mci-primary-disabled-color: var(--color-text-1);
$mci-primary-disabled-bd-color: var(--color-brand-3);
$mci-primary-disabled-bg-color: var(--color-brand-3);


.is-message-box {
  --el-color-info: #{$mci-primary-bd-color};
  --el-messagebox-color: #{$mci-primary-bd-color};
  .el-message-box {
    padding: 24px 32px;
    --el-messagebox-padding-primary: 0px;
    --el-messagebox-width: 500px;
    // --el-messagebox-padding-primary: 24px;
  }
  .el-message-box__header {
    padding: 0;
  }

  .el-message-box__close {
    color: var(--color-text-4);
    // &:hover {
    //   color: yellow;
    // }
  }

  .el-message-box__status {
    padding-right: 0px;
    margin-right: 8px
  }

  .el-message-box__title {
    @include text-16__bold($text-primary-color);
    justify-content: flex-start;
  }

  .el-message-box__content {
  }

  .el-message-box__message p {
    @include text-14($text-primary-color);
    text-align: left;
  }

  .el-message-box__btns {
    justify-content: flex-end;
    margin-top: 24px;
    padding: 0;
    button {
      --el-button-text-color: #{$mci-default-color};
      --el-button-hover-text-color: #{$mci-default-hover-color};
      --el-button-active-text-color: #{$mci-default-active-color};
      --el-button-border-color: #{$mci-default-bd-color};
      --el-button-hover-border-color: #{$mci-default-hover-bd-color};
      --el-button-active-border-color: #{$mci-default-active-bd-color};
      --el-button-bg-color: #{$mci-default-bg-color};
      --el-button-hover-bg-color: #{$mci-default-hover-bg-color};
      --el-button-active-bg-color: #{$mci-default-active-bg-color};
      &.el-button--primary {
        --el-button-text-color: #{$mci-primary-color};
        --el-button-hover-text-color: #{$mci-primary-hover-color};
        --el-button-active-text-color: #{$mci-primary-active-color};
        --el-button-border-color: #{$mci-primary-bd-color};
        --el-button-hover-border-color: #{$mci-primary-hover-bd-color};
        --el-button-active-border-color: #{$mci-primary-active-bd-color};
        --el-button-bg-color: #{$mci-primary-bg-color};
        --el-button-hover-bg-color: #{$mci-primary-hover-bg-color};
        --el-button-active-bg-color: #{$mci-primary-active-bg-color};
      }
      &:nth-child(2) {
        margin-left: 8px;
      }
    }
  }
}